<HTML>
<HEAD>
	<TITLE>JavaScript Toolbox - Dynamic Option List</TITLE>
<SCRIPT SRC="DynamicOptionList.js"></SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F" onLoad="initDynamicOptionLists();">


<TABLE WIDTH="100%" BORDER="0"><TR><TD WIDTH="100%" ALIGN="LEFT" VALIGN="TOP">



<FORM NAME="FORM1">

<SCRIPT ID="example1">
var regionState = new DynamicOptionList();
regionState.addDependentFields("REGION1","STATE1");
regionState.addDependentFields("REGION2","STATE2");
regionState.addDependentFields("REGION3","STATE3");

regionState.forValue("west").addOptions("California","Washington","Oregon");
regionState.forValue("midwest").addOptions("Illinois","Iowa","Missouri");
regionState.forValue("east").addOptions("New York","Maine","Pennsylvania");

regionState.forValue("midwest").setDefaultOptions("Iowa");
regionState.forValue("east").setDefaultOptions("New York");
regionState.forField("STATE3").setValues("Maine");
regionState.selectFirstOption = false;
</SCRIPT>
<!-- The next line prints out the source in this example page. It should not be included when you actually use the code -->
<SCRIPT LANGUAGE="JavaScript">writeSource("example1");</SCRIPT>
Region 1: <SELECT NAME="REGION1"><OPTION VALUE="west" SELECTED>West<OPTION VALUE="midwest">Midwest<OPTION VALUE="east">East</SELECT>
State 1: <SELECT NAME="STATE1"><SCRIPT>regionState.printOptions("STATE1")</SCRIPT></SELECT>
<br>
Region 2: <SELECT NAME="REGION2"><OPTION VALUE="west">West<OPTION VALUE="midwest" SELECTED>Midwest<OPTION VALUE="east">East</SELECT>

State 2: <SELECT NAME="STATE2"><SCRIPT>regionState.printOptions("STATE2")</SCRIPT></SELECT>
<br>
Region 3: <SELECT NAME="REGION3"><OPTION VALUE="west">West<OPTION VALUE="midwest">Midwest<OPTION VALUE="east" SELECTED>East</SELECT>
State 3: <SELECT NAME="STATE3"><SCRIPT>regionState.printOptions("STATE3")</SCRIPT></SELECT>

<br><br><hr><br>

<U><B>Example 2: Lots Of Dependent Fields</B></U>

<BR>
This is a 6-level list of junk data, to show that the number of nested levels is unlimited. The second options in each list have sub-options.
<br>
<SCRIPT ID="example2">
var sixLevel = new DynamicOptionList("L1","L2","L3","L4","L5","L6");
sixLevel.forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2","2");
</SCRIPT>
<!-- The next line prints out the source in this example page. It should not be included when you actually use the code -->
<SCRIPT LANGUAGE="JavaScript">writeSource("example2");</SCRIPT>
<SELECT NAME="L1">
	<OPTION VALUE="1" SELECTED>1
	<OPTION VALUE="2">2 --&gt;
</SELECT>
<SELECT NAME="L2"><SCRIPT>sixLevel.printOptions("L2")</SCRIPT></SELECT>
<SELECT NAME="L3"><SCRIPT>sixLevel.printOptions("L3")</SCRIPT></SELECT>

<SELECT NAME="L4"><SCRIPT>sixLevel.printOptions("L4")</SCRIPT></SELECT>
<SELECT NAME="L5"><SCRIPT>sixLevel.printOptions("L5")</SCRIPT></SELECT>
<SELECT NAME="L6"><SCRIPT>sixLevel.printOptions("L6")</SCRIPT></SELECT>
<br>
</FORM>

<hr>
<FORM NAME="FORM2">


<SCRIPT ID="example3">
var makeModel = new DynamicOptionList("MAKE","MODEL","TYPE");
//makeModel.addDependentFields("MAKE2","MODEL2","TYPE2");

makeModel.forValue("Ford").addOptions("Fiesta","Focus","Taurus"); // Add options if VALUE of option is selected
//makeModel.forText("Honda").addOptions("Civic","Accord","Prelude"); // Add these options if TEXT of option is selected
makeModel.forText("Honda").addOptions("Civic","Accord","Prelude");

makeModel.forValue("Ford").setDefaultOptions("Fiesta");
makeModel.forText("Honda").setDefaultOptions("Accord");
makeModel.forValue("Ford").forValue("Taurus").addOptions("2-door","4-door");
makeModel.forValue("Ford").forValue("Focus").addOptions("2-door","4-door");
makeModel.forText("Honda").forValue("Civic").addOptions("2-door","4-door");

makeModel.forField("MODEL").setValues("Focus","Taurus");
makeModel.forField("TYPE").setValues("2-door");
makeModel.forField("MODEL2").setValues("Civic","Prelude");

makeModel.forValue("Toyota").addOptionsTextValue("Camry","10-CAMRY","Corolla","20-COROLLA","Celica","30-CELICA"); // Add options with values different from text

</SCRIPT>
<!-- The next line prints out the source in this example page. It should not be included when you actually use the code -->
<SCRIPT LANGUAGE="JavaScript">writeSource("example3");</SCRIPT>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="3">
<TR>
	<TH>Make</TH><TH>Model</TH><TH>Type</TH>

</TR>
<TR>
	<TD VALGN="top">
	<SELECT NAME="MAKE" MULTIPLE SIZE=5>
		<OPTION VALUE="Honda">Honda
		<OPTION VALUE="Ford">Ford
		<OPTION VALUE="Toyota">Toyota
	</SELECT>
	</TD>
	<TD VALIGN="top">
	<SELECT NAME="MODEL" MULTIPLE SIZE=5>

	<SCRIPT LANGUAGE="JavaScript">makeModel.printOptions("MODEL")</SCRIPT>
	</SELECT>
	</TD>
	<TD VALIGN="top">
	<SELECT NAME="TYPE" MULTIPLE>
	<SCRIPT LANGUAGE="JavaScript">makeModel.printOptions("TYPE")</SCRIPT>
	</SELECT>
	</TD>

</TR>

<TR>
	<TD COLSPAN="3" ALIGN="center">
	<input type="button" value="Reset This Form" onClick="this.form.reset(); resetDynamicOptionLists(this.form);">
	</TD>
</TR>
</TABLE>

</FORM>



</TD><TD VALIGN="TOP">
<script type="text/javascript">
google_ad_client = "pub-9155030588311591";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_color_border = "006666";
google_color_bg = "FFFFFF";
google_color_link = "006666";
google_color_url = "006666";
google_color_text = "000000";
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</TD></TR></TABLE>


</BODY>
</HTML>
